<template>
  <div
    class="view-wrap"
    :class="{'no-select':canSelect}"
    :style="`width:${screenStyle.width}px;height:${screenStyle.height}px;backgroundColor:${screenStyle.bkcolor}`"
    @mousedown.self="cancleSelect"
  >
    <component
      v-for="item in compList"
      :id="item.uid"
      :is="item.compName"
      :key="item.uid"
      :info="item.info"
      @selectComp="selectComp(item.uid)"
    ></component>

    <Resize v-show="isComp" />

    <refer-line />
  </div>
</template>

<script>
import ReferLine from "./viewTools/ReferLines";
import Resize from "./viewTools/ResizeController";

export default {
  name: "viewPen",
  data() {
    return {
      isComp: false,
      currentCompStyle: ""
    };
  },
  components: {
    Resize,
    ReferLine
  },
  computed: {
    screenStyle() {
      return this.$store.state.screenProps;
    },
    currentID() {
      return this.$store.state.currentID;
    },
    canSelect() {
      return this.$store.state.canSelect;
    },
    compList() {
      return this.$store.state.selectCompList;
    }
  },
  mounted() {},
  methods: {
    /**
     * 选择组件
     * @param {String} compID 组件ID
     */
    selectComp(compID) {
      this.$store.commit("setSelect", compID);
    },
    /**
     * 取消选择
     */
    cancleSelect() {
      this.$store.commit("setSelect", "");
    }
  },
  watch: {
    currentID(val) {
      this.isComp = val ? true : false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.no-select
  -moz-user-select none
  -webkit-user-select none
  -ms-user-select none
  user-select none
.view-wrap
  position relative
  flex auto
  background #fff
  margin 50px
</style>
